<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-22 05:23:33
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:21:45
-->
<template>
  <div class="APN_box">
    <div class="APN_box_header">
      <i class="el-icon-menu"/>
      公告列表
    </div>
    <el-button
      class="APN_addButton"
      size="small"
      type="success"
      @click="handleAdd"
    >
      <i class="el-icon-plus"/>
      新增公告
    </el-button>
    <el-table
      class="APN_table"
      :data="tableData"
      min-height="500px"
      :default-sort = "{prop: 'publishTime', order: 'descending'}"
      highlight-current-row
      border
      stripe
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="APN_table_expand">
            <el-form-item label="公告内容">
              <span>{{ props.row.notice }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        prop="publishTime"
        label="发布时间"
        width="180"
      />
      <el-table-column
        prop="onlyForVolunteer"
        label="是否为仅志愿者可见"
        width="180"
      />
      <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            style="margin-right: 10px;"
            :underline="false"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  approverCheckNotice,
  approverDeleteNotice
} from '@/api/approver/approverNotice';
export default {
  name: 'ApproverPublishNotice',
  data() {
    return {
      tableData: []
    }
  },
  created() {
    approverCheckNotice().then((data) => {
      data.forEach(item => {
        if (item.onlyForVolunteer === '1') {
          item.onlyForVolunteer = '是';
        } else {
          item.onlyForVolunteer = '否';
        }
        this.tableData.push(item);
      })
    });
  },
  methods: {
    handleAdd() {
      this.$router.push({ name: 'ApproverAddNotice' });
    },
    handleEdit(index, row) {
      this.$store.commit('approver/setNotice', row);
      this.$router.push({ name: 'ApproverUpdateNotice' });
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        approverDeleteNotice(row).then(() => {
          this.tableData.splice(index, 1);
          this.$message.success('删除成功');
        });
      });
    }
  }
}
</script>

<style lang="scss">
.APN_box {
  background: #FFFFFF;
  display: inline-block;
  width: calc(100% - 100px);
  min-width: 740px;
  margin: 50px 50px 0px 50px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.2);

  .APN_box_header {
    background: #EEE;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #DDD;
  }

  .APN_addButton {
    margin: 10px 20px 10px 10px;
    float: right;
    font-size: 14px;
  }

  .APN_table {
    width: calc(100% - 40px);
    margin: 10px 20px 10px 20px;

    .APN_table_expand {
      font-size: 0;
    }
    .APN_table_expand label {
      width: 90px;
      color: #005187;
    }
    .APN_table_expand .el-form-item {
      margin: 0px 0px 0px 10px;
      width: 60%;
    }
  }
}

</style>